<template>
    <view>
        <uni-search-bar @confirm="saveSearchKey(key)" @cancel="searchAgain" @clear="searchAgain" :focus="true" v-model="key"></uni-search-bar>
        <template v-if="isSearch">
            <view v-if="searchKey.length > 0" class="uni-px-6">
                <view class="flex justify-between items-center text-gray-700">
                    <text class="font-semibold">历史记录</text>
                    <uni-icons @click="deleteSearchKey" type="trash" size="18"></uni-icons>
                </view>
                <view class="flex flex-wrap uni-my-4">
                    <uni-tag @click="search(item)" v-for="(item, index) in searchKey" :key="index"
                        custom-style="color: #000;padding:2px 10px;margin-right:6px" :inverted="true" :circle="true"
                        size="small" :text="item" />
                </view>
            </view>
            <view class="uni-px-6">
                <text class="font-semibold uni-my-4">搜索发现</text>
                <view @click="saveSearchKey(item.key)" v-for="item in searchList" :key="item.id"
                    class="flex justify-between border-0 border-solid border-b border-gray-300 uni-py-2">
                    <text class="text-gray-600">{{ item.key }}</text>
                    <uni-badge class="uni-badge-left-margin" :text="item.count" type="info" />
                </view>
            </view>
        </template>
        <NoteCard :list="list" />
        <uni-load-more iconType="circle" :status="status" />
    </view>
</template>

<script>
import NoteCard from '@/components/NoteCard'
import { httpNoteSearch, httpSearchTop } from '@/utils/api.js'
export default ({
    components: { NoteCard },
    data() {
        return {
            key: '',
            list: [],
            page: 1,
            size: 6,
            status: 'more',
            searchKey: [],
            searchList: [],
            isSearch: true
        }
    },
    onLoad() {
        // 获取历史关键词
        uni.getStorage({
            key: 'search_key',
            success: (res) => {
                this.searchKey = res.data || []
            }
        })
        this.getSearchTop()
    },
    // 下拉刷新
    async onPullDownRefresh() {
        this.list = []
        this.page = 1
        await this.search()
        uni.stopPullDownRefresh()
    },
    // 触底
    onReachBottom() {
        this.loadNote()
    },
    methods: {
        // 搜索排行
        async getSearchTop() {
            const { code, data } = await httpSearchTop()
            if (code === 200) this.searchList = data
        },
        // 情况搜索历史
        deleteSearchKey() {
            uni.removeStorageSync('search_key')
            this.searchKey = []
        },
        // 存储搜索关键字
        saveSearchKey(key) {
            const found = this.searchKey.find(element => element === key)
            if (!found) {
                this.searchKey.push(key)
                uni.setStorage({
                    key: 'search_key',
                    data: this.searchKey
                })
            }
            // 开始搜素
            this.search(key)
        },
        // 搜索
        async search(key) {
            this.key = key
            this.isSearch = false
            this.status = 'loading'
            this.page = 1
            const { code, data } = await httpNoteSearch({
                key: key,
                size: this.size,
                page: this.page,
            })
            if (code === 200) {
                this.list = []
                const notes = data.rows
                if (notes.length === 0) {
                    this.status = 'noMore'
                    return false
                }
                this.list = [...this.list, ...notes]
                this.page++
                this.status = 'more'
                if (notes.length < this.size) this.status = 'noMore'
            }
        },
        async loadNote() {
            this.status = 'loading'
            const { code, data } = await httpNoteSearch({
                key: this.key,
                size: this.size,
                page: this.page,
            })
            if (code === 200) {
                const notes = data.rows
                if (notes.length === 0) {
                    this.status = 'noMore'
                    return false
                }
                this.list = [...this.list, ...notes]
                this.page++
                this.status = 'more'
                if (notes.length < this.size) this.status = 'noMore'
            }
        },
        goto(url) {
            uni.navigateTo({
                url
            })
        },
        searchAgain() {
            this.key = ''
            this.list = []
            this.isSearch = true
        }
    }
})
</script>